<div class="hidden lg:block lg:col-span-1">
    <div class="mb-3">
        <form class="widget-search__form" role="search" method="get" action="/search/">
            <label>
                <input
                    class="w-full p-3 focus:outline-none dark:bg-warmgray-900 dark:text-white placeholder-gray-700 dark:placeholder-gray-300"
                    type="text" name="keyword" placeholder="请输入关键词..." value="{{keyword}}"  aria-label="Search">
            </label>
            <input class="hidden" type="submit" value="搜索">
        </form>
    </div>
    <!-- <div class="bg-white panel mb-3 pb-5 dark:bg-warmgray-900">
        <p class="text-xl text-center text-gray-700 py-3 px-3 dark:text-gray-300 font-bold">Archives</p>
        <div class="mx-4">
            <select
                class="text-center block mx-auto w-full py-2 px-4 duration-100 bg-white hover:bg-gray-200 text-gray-800 dark:bg-warmgray-900 dark:text-gray-200 dark:hover:bg-warmgray-800"
                name="archive" onchange="location.href=value">
                <option>Select Archive...</option>
                <option value="https://blonde.pages.dev//archives/2019/03">2019/03 (5)
                </option>
                <option value="https://blonde.pages.dev//archives/2020/08">2020/08 (1)
                </option>
            </select>
        </div>
    </div> -->
    <!-- <div class="bg-white panel mb-3 pb-5 dark:bg-warmgray-900">
        <p class="text-xl text-center text-gray-700 py-5 dark:text-gray-300 font-bold">Categories</p>
        <a class="text-center block duration-100 py-2 px-4 mx-4 hover:bg-gray-100 text-gray-800 dark:text-gray-200 dark:hover:bg-warmgray-800"
            href="https://blonde.pages.dev//categories/syntax">Syntax</a>
        <a class="text-center block duration-100 py-2 px-4 mx-4 hover:bg-gray-100 text-gray-800 dark:text-gray-200 dark:hover:bg-warmgray-800"
            href="https://blonde.pages.dev//categories/themes">Themes</a>
    </div> -->
    <!-- <div class="bg-white panel mb-3 dark:bg-warmgray-900">
        <p class="text-xl text-center text-gray-700 py-3 pl-3 dark:text-gray-300 font-bold">Tags</p>
        <div class="panel-block p-2">
            <a href="/tags/css">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    css
                </span></a>
            <a href="/tags/emoji">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    emoji
                </span></a>
            <a href="/tags/html">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    html
                </span></a>
            <a href="/tags/markdown">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    markdown
                </span></a>
            <a href="/tags/privacy">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    privacy
                </span></a>
            <a href="/tags/shortcodes">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    shortcodes
                </span></a>
            <a href="/tags/text">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    text
                </span></a>
            <a href="/tags/themes">
                <span
                    class="duration-100 inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-100 justify-center h-8 px-3 text-blue-500 hover:text-blue-900 dark:bg-warmgray-800">
                    themes
                </span></a>
        </div>
    </div> -->
    <div class="bg-white panel mb-3 pb-5 dark:bg-warmgray-900">
        <p class="text-xl text-center text-gray-700 py-5 dark:text-gray-300 font-bold">最新文章</p>
        <div class="mx-6">
            {{each latest item index}}  
              <a href="{{url(':article', {id: item.id})}}">
                <div
                    class="w-full block mt-3 bg-white hover:bg-gray-100 duration-200 dark:bg-warmgray-900 dark:text-gray-200 dark:hover:bg-warmgray-800">
                    <div class="px-2">
                        <div class="text-gray-900 font-bold text-xl dark:text-white">{{item.title}}</div>
                        <p class="text-sm text-gray-600 flex items-center pb-1 dark:text-gray-400">
                            <time><span class="icon-access_time mr-1"></span>{{item.add_time | dateFormat 'YYYY-mm-dd'}}</time>
                        </p>
                    </div>
                </div>
            </a>
            {{/each}}
        </div>
    </div>

    <div class="bg-white panel mb-3 pb-5 dark:bg-warmgray-900">
        <p class="text-xl text-center text-gray-700 py-5 dark:text-gray-300 font-bold">热点文章</p>
        <div class="mx-6">
            {{each hot item index}}  
              <a href="{{url(':article', {id: item.id})}}">
                <div
                    class="w-full block mt-3 bg-white hover:bg-gray-100 duration-200 dark:bg-warmgray-900 dark:text-gray-200 dark:hover:bg-warmgray-800">
                    <div class="px-2">
                        <div class="text-gray-900 font-bold text-xl dark:text-white">{{item.title}}</div>
                        <p class="text-sm text-gray-600 flex items-center pb-1 dark:text-gray-400">
                            <time><span class="icon-access_time mr-1"></span>{{item.add_time | dateFormat 'YYYY-mm-dd'}}</time>
                        </p>
                    </div>
                </div>
            </a>
            {{/each}}
        </div>
    </div>
</div> 